<template>
  <div class="card-style">
    <div class="card-style-top">
      <div class="card-style-top-left">
        <div class="card-style-top-left-left">
          <img src="../images/f.png" />
        </div>
        <div class="card-style-top-left-right">
          <div class="card-style-top-left-right-info1">{{ info1 }}</div>
        </div>
      </div>
      <div class="card-style-top-right">
        <Tag :color="getColor(info3)">{{ info4 }}</Tag>
      </div>
    </div>
    <div class="card-style-bottom">
      <div class="card-style-bottom-left-card">
        <div class="card-style-bottom-left-card-info">
          <div class="card-style-bottom-left-card-info-label">
            响应时间(min)：
          </div>
          <div class="card-style-bottom-left-card-info-value">
            {{ info5 || "--" }}
          </div>
        </div>
        <div class="card-style-bottom-left-card-info">
          <div class="card-style-bottom-left-card-info-label">
            处理时间(min)：
          </div>
          <div class="card-style-bottom-left-card-info-value">
            {{ info6 || "--" }}
          </div>
        </div>
      </div>
      <div class="card-style-bottom-right-card">
        <div class="card-style-bottom-right-card-info">
          <div class="card-style-bottom-right-card-info-label">工单号：</div>
          <div class="card-style-bottom-right-card-info-value">
            {{ info7 || "--" }}
          </div>
        </div>
        <div class="card-style-bottom-right-card-info">
          <div class="card-style-bottom-right-card-info-label">报修人：</div>
          <div class="card-style-bottom-right-card-info-value">
            {{ info8 || "--" }}
          </div>
        </div>
        <div class="card-style-bottom-right-card-info">
          <div class="card-style-bottom-right-card-info-label">报修时间：</div>
          <div class="card-style-bottom-right-card-info-value">
            {{ info9 || "--" }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Tag from "@/components/dataBoard/components/tag/index.vue";

export default {
  components: { Tag },
  props: {
    info1: String,
    info2: String,
    info3: String,
    info4: String,
    info5: String,
    info6: String,
    info7: String,
    info8: String,
    info9: String,
  },
  methods: {
    getColor(code){
      //待分配
      if(code == 5) {
        return '#f0973f';
      }
      //维修中
      if(code == 6) {
        return '#3374f6';
      }
      //升级中
      if(code == 10) {
        return '#f07577';
      }
    }
  }
};
</script>

<style scoped lang="scss">
.card-style {
  box-shadow: 0px 4px 8px 0px rgba(0, 20, 45, 0.14);
  padding: 14px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 24%;
  row-gap: 10px;

  .card-style-top {
    display: flex;
    justify-content: space-between;
    width: 100%;
    .card-style-top-left {
      display: flex;
      justify-content: center;
      align-items: center;
      .card-style-top-left-left {
      }
      .card-style-top-left-right {
        .card-style-top-left-right-info1 {
        }
        .card-style-top-left-right-info2 {
        }
      }
    }
    .card-style-top-right {
    }
  }
  .card-style-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    .card-style-bottom-left-card {
      flex: 1;
      background: linear-gradient(to right, #f4f7fc, #eff4fa);
      box-shadow: 0px 4px 8px 0px rgba(0, 20, 45, 0.04);
      padding: 14px 7px;
      border-radius: 5px;
      gap: 10px;
      display: flex;
      flex-direction: column;
      .card-style-bottom-left-card-info {
        display: flex;
        justify-content: center;
        align-items: center;
        .card-style-bottom-left-card-info-label {
          font-size: 10px;
        }
        .card-style-bottom-left-card-info-value {
          color: #41b38b;
          font-size: 14px;
          font-weight: bold;
        }
      }
    }
    .card-style-bottom-right-card {
      flex: 1;
      background: linear-gradient(to right, #f4f7fc, #eff4fa);
      box-shadow: 0px 4px 8px 0px rgba(0, 20, 45, 0.04);
      padding: 10px 7px;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .card-style-bottom-right-card-info {
        display: flex;
        justify-content: space-between;
        .card-style-bottom-right-card-info-label {
          font-size: 10px;
          width: 50px;
        }
        .card-style-bottom-right-card-info-value {
          flex: 1;
          font-size: 10px;
        }
      }
    }
  }
}
</style>
